
<jsp:include page="commonjsp/header.jsp"></jsp:include>
<div class="visitor-info">
	<h3>Visitor Information</h3>
</div>
<div class="content">
 	<div class="form"> <!--RegisteredServelet -->
		<form action="RegisteredServerlet" method="post" id="input_form"
			name="formRegister" onsubmit="return checkAll();">
			<div class="row">
				<div class="col1">
					<p>Username :</p>
				</div>
				<div class="col2">
					<input type="text" name="username" id="username" />
				</div>
			</div>
			<div class="row">
				<div class="col1">
					<p>Password :</p>
				</div>
				<div class="col2">
					<input type="password" name="password" id="password" />
				</div>
			</div>
			<div class="row">
				<div class="col1">
					<p>Re-Password :</p>
				</div>
				<div class="col2">
					<input type="password" name="repassword" id="repassword" />
				</div>
			</div>
			<div class="row">
				<div class="col1">
					<p>First name :</p>
				</div>
				<div class="col2">
					<input type="text" name="firstname" id="firstname" />
				</div>
			</div>
			<div class="row">
				<div class="col1">
					<p>Last name :</p>
				</div>
				<div class="col2">
					<input type="text" name="lastname" />
				</div>
			</div>
			<div class="row">
				<div class="col1">
					<p>Gender :</p>
				</div>
				<div class="col2">
					<select>
						<option value="male">Male</option>
						<option value="female">Female</option>
						<option value="other">Other</option>
					</select>
				</div>
			</div>
			<div class="row">
				<div class="col1">
					<p>Telephone :</p>
				</div>
				<div class="col2">
					<input type="text" name="telephone" />
				</div>
			</div>
			<div class="row">
				<div class="col1">
					<p>Email :</p>
				</div>
				<div class="col2">
					<input type="text" name="email" />
				</div>
			</div>
			<div class="row">
				<div class="col1">
					<p>You are in :</p>
				</div>
				<div class="col2 area">
					<ul>
						<li class="place-row1"><input type="radio" name="area" />Europe
							<input type="radio" name="area" />Africa</li>
						<li class="place-row2"><input type="radio" name="area" />Australia
							<input type="radio" name="area" />Asia <input type="radio"
							name="area" />America</li>
					</ul>
				</div>
			</div>
			<div class="clear"></div>
			<div class="row">
				<div class="col1">
					<p>What are your hobbies :</p>
				</div>
				<div class="col2 hobby">
					<ul>
						<li><li><input type="checkbox" name="hobby" value="swimming" />Swimming
							<input type="checkbox" name="hobby" value="cooking" />Cooking <input
							type="checkbox" name="hobby" value="shopping" />Shopping</li>
						<li><input type="checkbox" name="hobby" value="sport" />Sport
							<input type="checkbox" name="hobby" value="dance" />Dance <input
							type="checkbox" name="hobby" value="sing" />Sing</li>
					</ul>
						</div>
					</div>
					<div class="clear"></div>
					<div class="row">
						<div class="col1">
							<p>Description :</p>
						</div>
						<div class="col2">
							<textarea name="description" rows="6" cols="30">
								
							</textarea>
						</div>
					</div>
					<div class="btn-register">
						<input type="submit" value="Register">
						<a href="#" id="ajaxButton">Help to register</a>
					</div>
				</form>
			</div>
			<div id="responseDiv"></div>
		</div>
	</div>

	<script type="text/javascript" src="js/jquery-1.9.0.js"></script>	
	<script type="text/javascript" src="js/jquery.validate.min.js"></script>
	<script type="text/javascript" src="js/messages_vi.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function() {
			jQuery("#ajaxButton").click(function() {
				jQuery.ajax({
					type : "POST",
					url : "help.jsp",
					success : function(html) {
						jQuery("#responseDiv").html(html);
					}
				});
			});
		});
	</script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#input_form").validate({
				rules : {

					username : {
						required : true,
					},

					password : {
						required : true,
					},

					repassword : {
						equalTo : "#password" // So sánh trường cpassword với trường có id là password
					},
					//First name must be characters and not contain number
					firstname : {
						required : true,
						maxlength : 20
					},
					//Last name must be characters and not contain number
					lastname : {
						required : true,
						maxlength : 20
					},
					//Must be number
					telephone : {
						maxlength : 11,
						number : true
					},
					//Must be [a..Z][0..9]@[a..Z].
					email : {
						maxlength : 50,
						email : true
					},
					description : {
						maxlength : 200
					},
				},
				messages : {
					username : {
						required : "User name must be a string",
					},
					password : {
						required : "Password isn't empty !",
					},
					firstname : {
						required : "First name must be a string",
					},
					lastname : {
						required : "Last name must be a string",
					},
					telephone : {
						required : "Please fill in this field",
					},
					email : {
						required : "Please fill in this field",
					},
					description : {
						required : "Please fill in this field",
					}
				}
			});
		})

		function checkAll() {
			var username = document.formRegister.username.value;
			var firstname = document.formRegister.firstname.value;
			var lastname = document.formRegister.lastname.value;
			var email = document.formRegister.email.value;
			var n;
			if (firstname == "") {
				alert(" invalid firstname");
				return false;
			}
			n = firstname.length;
			while (n > 0) {
				if (firstname.charAt(n - 1) > '0'
						&& firstname.charAt(n - 1) < '9') {
					alert(" firstname khong duoc chu ky tu so: "
							+ firstname.charAt(n - 1));
					return false;
				}
				n--;
			}

			n = lastname.length;
			while (n > 0) {
				if (lastname.charAt(n - 1) > '0'
						&& lastname.charAt(n - 1) < '9') {
					alert(" lastname khong duoc chu ky tu so: "
							+ lastname.charAt(n - 1));
					return false;
				}
				n--;
			}
			if ($('input[name=area]:checked').length <= 0) {
				alert(" You must to select a area");
				return false;
			}

			var rs = new RegExp(
					"^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$");
			if (!email.match(rs)) {
				alert(" invalid email");
				return false;
			}
		}
	</script>
</body>
</html>